<template>
    <div>
        <el-drawer
            ref="DrawerRef"
            v-model="drawerShow.visible"
            custom-class="drawer_box"
            :size="drawerShow.width"
            :title="drawerShow.title"
            :destroy-on-close="true"
            @close="handleClose">
            <el-tabs v-model="activeName" @tab-change="switchTab">
                <el-tab-pane label="未完成" :name="1"> </el-tab-pane>
                <el-tab-pane label="已完成" :name="2"> </el-tab-pane>
            </el-tabs>
            <ZwSearchForm ref="searchRef" row-num="3" :option="searchOption" @search="search" @reset="reset">
            </ZwSearchForm>
            <el-scrollbar class="scrollbar">
                <ZwTable
                    ref="tableRef"
                    class="table-box"
                    :option="taskType == 1 ? tableOption : taskType == 2 ? custVisit : addWechat"
                    :fetch-params="state.searchParams"
                    :fetch-api="getData()"></ZwTable>
            </el-scrollbar>
        </el-drawer>
    </div>

    <custDetail ref="custDetailRef"></custDetail>
</template>
<script lang="tsx" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { dividerProps, ElButton, ElMessage, ElPopover, ElProgress } from 'element-plus';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import custDetail from './custDetail.vue';
import { execDetail, taskRemind, execCyle } from '@/api/employe/employeetasks/taskmanage';
import { deepCopy } from '@/utils/helper';
const DrawerRef = ref(null);
const tableRef = ref(null);
const custDetailRef = ref(null);
const searchRef = ref(null);
const activeName = ref(1);
const taskType = ref(1);
const effect_time = ref();
const formData = reactive({
    task_id: '',
    name: '',
    type: '',
    dis_rule: '',
    cycle_unit: ''
});
const drawerShow = reactive({
    title: '',
    width: '',
    visible: false
});
const defaultParams = reactive({
    status: activeName.value,
    task_id: '',
    work_user: '',
    exec_cycle: []
});
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const tasksRemind = (val: any) => {
    const params = {
        type: 1,
        task_id: state.searchParams.task_id,
        work_user_id: val.work_user_id
    };
    taskRemind(params).then((res: any) => {
        ElMessage.success('提醒已发送');
    });
};
const searchOption = ref([
    {
        label: '执行员工',
        name: 'work_user',
        value: '',
        type: 'select',
        placeholder: '选择成员',
        multiple: false,
        popperClass: 'zw-hide_select_option',
        isUserSelect: true,
        formatOption: v => ({
            label: v.name,
            value: v.id
        })
    },
    {
        label: '执行周期',
        name: 'exec_cycle',
        value: [],
        type: 'datePicker',
        datePickerType: 'daterange',
        datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间'
    }
]);
const tableOption = [
    {
        prop: 'name',
        label: '员工信息',
        width: 250,
        render({ row, column, index }) {
            return (
                <div>
                    <el-avatar
                        style="width: 40px; height:40px; vertical-align: middle; margin-right: 10px"
                        shape="square"
                        src={row.avatar ? row.avatar : '/static/user.png'}></el-avatar>
                    <span>{row.name}</span>
                    <span v-show={row.nickname}>{'(' + row.nickname + ')'}</span>
                    <el-image
                        style="width: 14px; height: 14px"
                        src={
                            row.sex == 2
                                ? '/static/employeetasks/female.png'
                                : row.sex == 0
                                ? '/static/employeetasks/noSex.png'
                                : '/static/employeetasks/male.png'
                        }></el-image>
                    <el-tag v-show={row.is_self == 2} type="danger">
                        自己
                    </el-tag>
                </div>
            );
        }
    },
    {
        prop: 'dis_num',
        label: '分配线索数',
        width: 100
    },
    {
        prop: 'todo_num',
        label: '未完成任务数',
        width: 120
    },
    {
        prop: 'complete_num',
        label: '已完成任务数',
        width: 120
    },
    {
        prop: 'status',
        label: '状态',
        width: 100,
        render({ row, column, index }) {
            return (
                <div>
                    <span style="color: #969696" v-show={row.status == 1}>
                        未开始
                    </span>
                    <span style="color: #4099EC" v-show={row.status == 2}>
                        进行中
                    </span>
                    <span style="color: #59D2A0" v-show={row.status == 3}>
                        任务已完成
                    </span>
                    <span style="color: #FF6B00" v-show={row.status == 4}>
                        逾期完成
                    </span>
                    <span style="color: #FE292B" v-show={row.status == 5}>
                        已逾期
                    </span>
                </div>
            );
        }
    },
    {
        prop: 'complete_time',
        label: '完成时间',
        width: 200
    },
    {
        prop: 'operate',
        label: '操作',
        width: 260,
        fixed: 'right',
        isOperate: true,
        render({ row, column, index }) {
            return (
                <div>
                    <ElButton
                        class="sopBtn"
                        onClick={() => {
                            tasksDetail(row);
                        }}>
                        执行详情
                    </ElButton>
                    <ElButton
                        v-show={row.status == 5}
                        class="sopBtn"
                        onClick={() => {
                            tasksRemind(row);
                        }}>
                        提醒
                    </ElButton>
                </div>
            );
        }
    }
];
const custVisit = [
    {
        prop: 'name',
        label: '员工信息',
        width: 250,
        render({ row, column, index }) {
            return (
                <div>
                    <el-avatar
                        style="width: 40px; height:40px; vertical-align: middle; margin-right: 10px"
                        shape="square"
                        src={row.avatar ? row.avatar : '/static/user.png'}></el-avatar>
                    <span>{row.name}</span>
                    <span v-show={row.nickname}>{'(' + row.nickname + ')'}</span>
                    <el-image
                        style="width: 14px; height: 14px"
                        src={
                            row.sex == 2
                                ? '/static/employeetasks/female.png'
                                : row.sex == 0
                                ? '/static/employeetasks/noSex.png'
                                : '/static/employeetasks/male.png'
                        }></el-image>
                    <el-tag v-show={row.is_self == 2} type="danger">
                        自己
                    </el-tag>
                </div>
            );
        }
    },
    {
        prop: 'dis_num',
        label: '已分配客户数',
        width: 120
    },
    {
        prop: 'plan_num',
        label: '计划拜访数',
        width: 100
    },
    {
        prop: 'signin_num',
        label: '已签到客户数',
        width: 120
    },
    {
        prop: 'complete_num',
        label: '已完成任务数',
        width: 120
    },
    {
        prop: 'status',
        label: '状态',
        width: 100,
        render({ row, column, index }) {
            return (
                <div>
                    <span style="color: #969696" v-show={row.status == 1}>
                        未开始
                    </span>
                    <span style="color: #4099EC" v-show={row.status == 2}>
                        进行中
                    </span>
                    <span style="color: #59D2A0" v-show={row.status == 3}>
                        任务已完成
                    </span>
                    <span style="color: #FF6B00" v-show={row.status == 4}>
                        逾期完成
                    </span>
                    <span style="color: #FE292B" v-show={row.status == 5}>
                        已逾期
                    </span>
                </div>
            );
        }
    },
    {
        prop: 'complete_time',
        label: '完成时间',
        width: 200
    },
    {
        prop: 'operate',
        label: '操作',
        width: 260,
        fixed: 'right',
        isOperate: true,
        render({ row, column, index }) {
            return (
                <div>
                    <ElButton
                        class="sopBtn"
                        onClick={() => {
                            tasksDetail(row);
                        }}>
                        执行详情
                    </ElButton>
                    <ElButton
                        v-show={row.status == 5}
                        class="sopBtn"
                        onClick={() => {
                            tasksRemind(row);
                        }}>
                        提醒
                    </ElButton>
                </div>
            );
        }
    }
];
const addWechat = [
    {
        prop: 'name',
        label: '员工信息',
        width: 250,
        render({ row, column, index }) {
            return (
                <div>
                    <el-avatar
                        style="width: 40px; height:40px; vertical-align: middle; margin-right: 10px"
                        shape="square"
                        src={row.avatar ? row.avatar : '/static/user.png'}></el-avatar>
                    <span>{row.name}</span>
                    <span v-show={row.nickname}>{'(' + row.nickname + ')'}</span>
                    <el-image
                        style="width: 14px; height: 14px"
                        src={
                            row.sex == 2
                                ? '/static/employeetasks/female.png'
                                : row.sex == 0
                                ? '/static/employeetasks/noSex.png'
                                : '/static/employeetasks/male.png'
                        }></el-image>
                    <el-tag v-show={row.is_self == 2} type="danger">
                        自己
                    </el-tag>
                </div>
            );
        }
    },
    {
        prop: 'dis_num',
        label: '已分配客户数',
        width: 120
    },
    {
        prop: 'addwx_num',
        label: '已加微客户数',
        width: 120
    },
    {
        prop: 'complete_num',
        label: '已完成任务数',
        width: 120
    },
    {
        prop: 'status',
        label: '状态',
        width: 100,
        render({ row, column, index }) {
            return (
                <div>
                    <span style="color: #969696" v-show={row.status == 1}>
                        未开始
                    </span>
                    <span style="color: #4099EC" v-show={row.status == 2}>
                        进行中
                    </span>
                    <span style="color: #59D2A0" v-show={row.status == 3}>
                        任务已完成
                    </span>
                    <span style="color: #FF6B00" v-show={row.status == 4}>
                        逾期完成
                    </span>
                    <span style="color: #FE292B" v-show={row.status == 5}>
                        已逾期
                    </span>
                </div>
            );
        }
    },
    {
        prop: 'complete_time',
        label: '完成时间',
        width: 200
    },
    {
        prop: 'operate',
        label: '操作',
        width: 260,
        fixed: 'right',
        isOperate: true,
        render({ row, column, index }) {
            return (
                <div>
                    <ElButton
                        class="sopBtn"
                        onClick={() => {
                            tasksDetail(row);
                        }}>
                        执行详情
                    </ElButton>
                    <ElButton
                        v-show={row.status == 5}
                        class="sopBtn"
                        onClick={() => {
                            tasksRemind(row);
                        }}>
                        提醒
                    </ElButton>
                </div>
            );
        }
    }
];
const openDrawer = (val: any) => {
    state.searchParams.status = activeName.value = 1;
    state.searchParams.task_id = val.id;
    drawerShow.title = `【${val.name}】执行明细`;
    drawerShow.visible = true;
    drawerShow.width = 1100;
    taskType.value = val.type;
    formData.task_id = val.id;
    formData.name = val.name;
    formData.type = val.type;
    if (val.dis_rule) {
        formData.dis_rule = val.dis_rule;
        formData.cycle_unit = val.cycle_unit;
    }
    if (val.dis_rule && val.dis_rule == 2) {
        if (val.cycle_unit == 1) {
            searchOption.value[1] = {
                label: '执行周期',
                name: 'exec_cycle',
                value: [],
                type: 'datePicker',
                datePickerType: 'datetime',
                valueFormat: 'YYYY-MM-DD HH:mm:ss',
                placeholder: '选择时间'
            };
        } else {
            getCycle(val.id);
        }
    } else {
        searchOption.value[1] = {
            label: '执行周期',
            name: 'exec_cycle',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间',
            disabledDate: disabledDate
        };
        effect_time.value = val.effect_time;
    }
};
const getCycle = (data: any) => {
    const params = {
        task_id: data
    };
    searchOption.value[1] = {
        label: '执行周期',
        name: 'exec_cycle',
        value: '',
        type: 'select',
        placeholder: '请选择执行周期',
        fetchOptionApi: () => {
            return new Promise(resolve => {
                execCyle(params).then((data: any) => {
                    resolve(data);
                });
            });
        },
        formatOption: v => ({
            label:
                v.cycle_type == 2
                    ? `第${v.cycle_num}周 ${v.cycle_begin.split(' ')[0]}-${v.cycle_end.split(' ')[0]}`
                    : `第${v.cycle_num}月  ${v.cycle_begin.split(' ')[0]}-${v.cycle_end.split(' ')[0]}`,
            value: [v.cycle_begin, v.cycle_end]
        })
    };
};
const switchTab = (val: any, e: any) => {
    defaultParams.status = val;
    defaultParams.task_id = state.searchParams.task_id;
    state.searchParams = deepCopy(defaultParams);
    searchRef.value.reset();
};
const search = (data: any) => {
    if (data.exec_cycle && !Array.isArray(data.exec_cycle)) {
        data.exec_cycle = [data.exec_cycle, data.exec_cycle.split(' ')[0] + ' ' + '23:59:59'];
    }
    const params = {
        status: defaultParams.status,
        task_id: state.searchParams.task_id,
        ...data
    };
    state.searchParams = deepCopy(params);
};
const getData = () => {
    return execDetail;
};
const getType = () => {
    execDetail(state.searchParams).then((res: any) => {
        formData.object_type = res.object_type;
        if (formData.object_type == 1) {
            tableOption[1] = {
                prop: 'dis_num',
                label: '分配线索数',
                width: 100
            };
        } else {
            tableOption[1] = {
                prop: 'dis_num',
                label: '分配客户数',
                width: 100
            };
        }
    });
};
// const debounce = (func, wait) => {
//   let timeout
//   return function () {
//     clearTimeout(timeout)
//     timeout = setTimeout(func, wait) //返回计时器 ID
//   }
// }
const reset = (v: any) => {
    defaultParams.task_id = state.searchParams.task_id;
    state.searchParams = deepCopy(defaultParams);
};
const tasksDetail = (val: any) => {
    custDetailRef.value.openCust(val, formData);
};
const handleClose = () => {
    searchRef.value.reset();
};
const disabledDate = (time: string) => {
    return time.getTime() < new Date(effect_time.value[0]).getTime() || time.getTime() > new Date(effect_time.value[1]);
};
defineExpose({
    openDrawer,
    getType
});
</script>
<style lang="scss" scoped>
.scrollbar {
    height: calc(100vh - 300px);
    overflow-y: auto;
}
</style>
